<template>
  <a-row type="flex" justify="center" align="top">
    <a-col :span="24">
      <a-tabs
        tabPosition="top"
        @prevClick="callback"
        @nextClick="callback"
      >
        <a-tab-pane v-for="category of websites" :tab="category.categoryName" :key="category.id">
          <a-row type="flex" :gutter="[24,8]" class="blog-card-container">
            <a-col :span="6" v-for="link of category.links" :key="link.id">
              <a-card hoverable
                      :style="link.style">
                <a-card-meta :title="link.description" :description="link.url">
                  <a-avatar slot="avatar" :src="link.icon"
                            size="large" style="width: 60px;height: 60px;border-radius: 50%;"/>
                </a-card-meta>
              </a-card>
            </a-col>
          </a-row>
        </a-tab-pane>
      </a-tabs>
    </a-col>
  </a-row>
</template>
<script>
  import { v4 as uuidv4 } from 'uuid'

  export default {
    props: {
      websites: {
        type: Array,
        required: true
      }
    },
    data() {
      return {
      }
    },
    created() {
      for (let category of this.websites) {
        category.id = uuidv4()
        for (let link of category.links) {
          //var image = `linear-gradient(135deg, ${this.getRandomColor()} 0%, ${this.getRandomColor()} 100%)`
          //var image = `linear-gradient(135deg, rgb(73, 100, 179) 0%, rgb(243, 246, 201) 100%)`
          link.style = {
            // 'border-radius': '8px'
            // 'background-image': image
          }
          link.id = uuidv4()
        }
      }
    },
    methods: {
      /**
       * 随机颜色生成函数
       * @returns {string}
       */
      getRandomColor() {
        return '#' + (Math.random() * 0xffffff << 0).toString(16)
      },
      callback(val) {
      }
    }
  }
</script>
